<template>
  <div class="overflow-hidden">
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="在线图片编辑器">
        https://nhn.github.io/tui.image-editor/latest/ImageEditor
      </n-card>
    </div>
    <n-card :bordered="false" class="mt-4">
      <div class="h-[800px]">
        <div class="flex flex-row-reverse">
          <n-button type="info" class="ml-5" @click="handleSave"> 保存 </n-button>
          <n-upload class="w-auto" :on-change="handleUpload" file-list-class="hidden">
            <n-button>上传</n-button>
          </n-upload>
        </div>
        <ImageEditor ref="imageEditorRef" />
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ImageEditor } from '@/components/ImageEditor';
  import { downloadByBase64 } from '@/utils/file/download';
  const imageEditorRef = ref<typeof ImageEditor>();
  const handleUpload = ({ file: { file } }) => {
    imageEditorRef.value?.editorInstance.loadImageFromFile(file);
  };
  const handleSave = () => {
    var imageName = imageEditorRef.value?.editorInstance.getImageName();
    var dataURL = imageEditorRef.value?.editorInstance.toDataURL();
    downloadByBase64(dataURL, imageName);
  };
</script>
